<template>
    <div class="container">
      <div class="left">
        <div class="title">云音乐排行榜</div>
        <div class="item " :class="{cur:type==1}" @click="$router.push('/cart?type=1')">
            <img src="https://p1.music.126.net/0SUEG8yDACfx0Bw2MYFv4Q==/109951170048519512.jpg?param=60y60" alt="">
            <div>热歌榜</div>
        </div>
        <div class="item"  :class="{cur:type==2}" @click="$router.push('/cart?type=2')">
            <img src="https://p1.music.126.net/5guhqPBTcIrrhLBotgaT6w==/109951170048511751.jpg?param=60y60" alt="">
            <div>新歌榜</div>
        </div>
        <div class="item"  :class="{cur:type==3}" @click="$router.push('/cart?type=3')">
            <img src="https://p3.music.126.net/BaP9nrocNTL3gGThysv4eQ==/109951170091896587.jpg?param=60y60" alt="">
            <div>原创榜</div>
        </div>
      </div>
      <div class="right">
        <div class="topp">
            <img src="https://p1.music.126.net/0SUEG8yDACfx0Bw2MYFv4Q==/109951170048519512.jpg?param=160y160" alt="" v-if="type==1">
            <img src="https://p1.music.126.net/5guhqPBTcIrrhLBotgaT6w==/109951170048511751.jpg?param=160y160" alt="" v-if="type==2">
            <img src="https://p3.music.126.net/BaP9nrocNTL3gGThysv4eQ==/109951170091896587.jpg?param=160y160" alt="" v-if="type==3">
            <div>{{ type==1?'热歌榜':type==2?'新歌榜':'原创榜' }}</div>
        </div>
        <div class="r2">
            <span>歌曲列表</span>
            <span>{{ list.length }}首歌</span>
        </div>
        <el-table stripe
      :data="list"
      style="width: 100%">
      <el-table-column align="center"
        prop="date"
        label=""
        width="60">
        <template slot-scope="scope">
            {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="标题" align="center"
       >
       <template slot-scope="scope">
<div class="tab" @click="playG(scope.row.id)">
    <i class="el-icon-video-play"></i>
{{ scope.row.name }}
</div>
       </template>
      </el-table-column>
      <el-table-column
        prop="gname" align="center"
        label="歌手">
      </el-table-column>
      <el-table-column
        prop="cname" align="center"
        label="分类"> 
      </el-table-column>
       <el-table-column
        prop="num" align="center"
        label="已播放(次)"> 
      </el-table-column>
    </el-table>
      </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                list:[],

            }
        },
        mounted () {
     
      
        },
        watch: {
          '$route.query.type'(v){
            this.type=v
            api.getYinyue({
                type:v,
                size:100,page:1
            }).then(res=>{
                this.list=res.data.list
            })
          }  
        },
        methods: {
            playG(id){
       this.$router.push("/xiangqing?id="+id)
    }
        },
        mounted(){
            this.type=this.$route.query.type
            api.getYinyue({
                type:this.$route.query.type,
                size:100,page:1
            }).then(res=>{
                this.list=res.data.list
            })
        }
       
    }
</script>

<style lang="scss" scoped>
    .tab{
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        &:hover{
            border-bottom: 1px solid #000;
        }
    }
.container{
    border: 1px solid #ddd;
    display: flex;
    .right{
        flex: 1;
        padding: 60px 50px  50px 50px;
        .topp{
            display: flex;
            div{
                font-size: 26px;
                margin-left: 20px;
                padding-top: 20px;
            }
        }
        .r2{
            width: 100%;
            margin-top: 40px;
            padding-bottom: 10px;
            display: flex;
            border-bottom: 4px solid rgb(199, 12, 12);;
            font-size: 20px;
            display: flex;
            align-items: flex-end;
            >span:nth-child(2){
                margin-left: 20px;
                font-size: 14px;
                color: #666;
            }
        }
    }
    .left{
        width: 260px;
        border-right: 1px solid #ddd;
        
        padding-top: 60px;
      
        .title{
            padding:0 20px;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 16px;
        }
        .item{
            display: flex;
            cursor: pointer;
            // margin-top: 20px;
            padding:10px 20px;
            height: 80px;
          
            div{
                margin-left: 10px;
                font-size: 20px;
            }
            &:hover{
                background-color: rgb(236,236,236)
            }
            &.cur{
                background-color: rgb(230,230,230);
            }
        }
    }
}
</style>